<template>
  <div style="margin:5% auto">
    <el-select v-model="value" filterable clearable placeholder="全部" style=" margin: 0 30px">
      <el-option
        v-for="item in roleArr"
        :key="item.roleName"
        :label="item.roleName"
        :value="item.roleName">
      </el-option>
    </el-select>
    <el-button type="primary"  size="mini" plain icon="el-icon-search" @click="dianji" style="width: 50px ;margin-left: 40px "></el-button>
    <el-button type="success" size="mini" @click="dialogVisible = true">添加</el-button>
    <el-dialog  :visible.sync="dialogVisible">
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="hanClose">
        <p>用户名称:<el-input v-model="add.userName" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>用户密码:<el-input v-model="add.userPwd" placeholder="" style="width: 200px; margin-left: 25px" ></el-input></p>
        <p>性别:<el-input v-model="add.userSex" placeholder="" style="width: 200px; margin-left: 50px"></el-input></p>
        <p>年龄:<el-input v-model="add.userAge" placeholder="" style="width: 200px; margin-left: 50px"></el-input></p>
        <p>联系电话:<el-input v-model="add.userPhone" placeholder="" v-on:blur="telReg()" style="width: 200px; margin-left: 25px"></el-input><span style="color: red;margin-right: -55px" v-if="isPhone">格式错误</span></p>
        <p>电子邮箱:<el-input v-model="add.userEmail" placeholder="" v-on:blur="emailReg()" style="width: 200px; margin-left: 25px"></el-input><span style="color: red;margin-right: -55px" v-if="isEmail">格式错误</span></p>
        <p>角色id:<el-select name="" id="" v-model="add.roleId" style="width: 200px; margin-left: 38px">
          <el-option v-for="item in roleArr" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
        </el-select></p>
        <p>上级领导:<el-input v-model="add.leaderId" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>备注:<el-input v-model="add.remark" placeholder="" style="width: 200px; margin-left: 50px"></el-input></p>
        <p slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </p>
      </el-dialog>
    </el-dialog>

    <el-table
      :data="a"
      style="width: 95% ;margin: 0 auto; text-align: center">
      <el-table-column
        prop="userId"
        label="用户ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名称"
        width="100">

      </el-table-column>
      <el-table-column
        prop="userSex"
        label="性别"
        width="80">
      </el-table-column>
      <el-table-column
        prop="userAge"
        label="年龄"
        width="80">
      </el-table-column>
      <el-table-column
        prop="userPhone"
        label="联系电话"
        width="100">
        <!--<template slot-scope="{row: {tempTwo}}">-->
          <!--<span  v-html="tempTwo"></span>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="电子邮箱"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userCreateTime"
        label="创建时间"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userLoginTime"
        label="登录时间"
        width="100">
      </el-table-column>
      <el-table-column
        prop="leaderName"
        label="上级领导"
        width="100">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userId"
        label=""
        v-if="false">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            :data="b"
            size="mini"
            type="danger" plain
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button
            size="mini"
            type="success" plain
            v-show="scope.row.isShow=='true'"
            @click="handleCheck(scope.$index, scope.row)">查看信息</el-button>
          </template>
      </el-table-column>
    </el-table>
    <el-dialog  :visible.sync="VisibleDealer">
      <el-dialog
        title="查看经销商信息"
        :visible.sync="VisibleDealer"
        width="50%"
        :before-close="hanClose">
        <p>用户Id:<el-input v-model="check.userId" placeholder="" style="width: 200px; margin-left: 38px"></el-input></p>
        <p>公司名称:<el-input v-model="check.companyName" placeholder="" style="width: 200px; margin-left: 25px" ></el-input></p>
        <p>联系人:<el-input v-model="check.contactMan" placeholder="" style="width: 200px; margin-left: 40px" ></el-input></p>
        <p>联系电话:<el-input v-model="check.mobilePhone" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>固定电话:<el-input v-model="check.fixedPhone" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>传真:<el-input v-model="check.fax" placeholder="" style="width: 200px; margin-left: 50px"></el-input></p>
        <p>邮寄地址:<el-input v-model="check.emailAddress" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>代理产品:<el-input v-model="check.agencyProduct" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>银行账户:<el-input v-model="check.bankAccount" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>账户余额:<el-input v-model="check.bankBalance" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>公司简介:<el-input v-model="check.companyIntro" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>公司地址:<el-input v-model="check.companyAddress" placeholder="" style="width: 200px; margin-left: 25px"></el-input></p>
        <p>备注:<el-input v-model="check.remark" placeholder="" style="width: 200px; margin-left: 50px"></el-input></p>
      </el-dialog>
    </el-dialog>
    <!--分页-->
    <div class="block" style="margin-left: 30px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zpage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuanXian',
  data () {
    return {
      // 姓名搜索
      options: [{
        value: '选项1',
        label: '业务员'
      }, {
        value: '选项2',
        label: '区域经理'
      }, {
        value: '选项3',
        label: '系统管理员'
      }],
      value: '',
      add: { userId: '', userName: '', userPwd: '', userSex: '', userAge: '', userPhone: '', userEmail: '', roleId: '', leaderId: '', remark: '' },
      edit: { userId: '', userName: '', userSex: '', userAge: '', userPhone: '', userEmail: '', roleId: '', leaderId: '', remark: '' },
      check: { userId: '', companyName: '', contactMan: '', mobilePhone: '', fixedPhone: '', fax: '', emailAddress: '', agencyProduct: '', bankAccount: '', bankBalance: '', companyIntro: '', companyAddress: '', remark: '' },
      roleArr: [],
      a: [],
      b: [],
      input: '',
      bian: '',
      dialogVisible: false,
      dialogVisibles: false,
      formLabelWidth: '50px',
      update: {
        roleId: '',
        roleName: '',
        permissionName: '',
        remark: ''
      },
      currentPage: 10,
      page: 1,
      zpage: 0,
      isPhone: false,
      isEmail: false,
      editUid: '',
      isUid: false,
      userid: false,
      visibleCheck: '',
      VisibleDealer: false,
      dealerArr: ''
    }
  },
  created: function () {
    this.$axios.post('user/queryUsers', { page: this.page, limit: 100, userId: 4, roleId: this.getUser.roleId, userName: '', roleName: '', leaderName: '' })
      .then((response) => {
        // window.console.log(response.data.data);
        this.a = response.data.data
        this.zpage = Math.ceil(this.a.length)
        for (var i = 0; i < this.a.length; i++) {
          if (this.a[i].roleName === '经销商') {
            this.$set(this.a[i], 'isShow', 'true')
          } else {
            this.$set(this.a[i], 'isShow', 'false')
          }
          // 转换时间格式
          this.a[i].tempOne = ''
          this.a[i].tempTwo = ''
          this.a[i].userCreateTime = this.formatDate(new Date(this.a[i].userCreateTime))
          this.a[i].userLoginTime = this.formatDate(new Date(this.a[i].userLoginTime))
        }
        window.console.log(this.a)
      })
      .catch(function (error) {
        window.console.log(error)
      })

    this.$axios.post('user/queryRoleBy', { roleId: this.getUser.roleId })
      .then((response) => {
        this.roleArr = response.data.data
        window.console.log(this.roleArr)
      })
      .catch(function (error) {
        window.console.log(error)
      })
  },
  methods: {
    getUser () {
      return this.$store.getters.getUserInfo
    },
    telReg: function () {
      var regPhone = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (this.add.userPhone === '') {
        this.isPhone = false
      } else if (!regPhone.test(this.add.userPhone)) {
        this.isPhone = true
      } else {
        this.isPhone = false
      }
    },
    emailReg: function () {
      var regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
      if (this.add.userEmail === '') {
        this.isEmail = false
      } else if (!regEmail.test(this.add.userEmail)) {
        this.isEmail = true
      } else {
        this.isEmail = false
      }
    },
    // //转换data
    zhuan: function () {
      for (var i = 0; i < this.a.length; i++) {
        if (this.a[i].roleName === '经销商') {
          this.$set(this.a[i], 'isShow', 'true')
        } else {
          this.$set(this.a[i], 'isShow', 'false')
        }
        // 转换时间格式
        this.a[i].tempOne = ''
        this.a[i].tempTwo = ''
        this.a[i].userCreateTime = this.formatDate(new Date(this.a[i].userCreateTime))
        this.a[i].userLoginTime = this.formatDate(new Date(this.a[i].userLoginTime))
      }
    },
    // 请求
    requestData: function () {
      this.$axios.post('user/queryUsers', { page: this.page, limit: 100, userId: 4, roleId: this.getUser.roleId, userName: '', roleName: '', leaderName: '' })
        .then((response) => {
          window.console.log(response.data.data)
          this.a = response.data.data
          this.zpage = Math.ceil(this.a.length)
          this.zhuan()
        })
        .catch(function (error) {
          window.console.log(error)
        })
    },
    dianji: function () {
      window.console.log(this.value)
      this.$axios.post('user/queryUsers', { page: this.page, limit: 100, userId: 4, roleId: this.getUser.roleId, userName: '', roleName: this.value, leaderName: '' })
        .then((response) => {
          window.console.log(response.data.data)
          this.a = response.data.data
          this.zpage = Math.ceil(this.a.length)
          this.zhuan()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    handleCheck: function (index, row) {
      this.VisibleDealer = true
      this.check.companyName = this.dealerArr.companyName
      window.console.log(index)
      this.$axios.post('user/queryDealer', { userId: row.userId })
        .then((response) => {
          window.console.log(response.data.data)
          this.dealerArr = response.data.data
          this.check.userId = row.userId
          this.check.contactMan = this.dealerArr.contactMan
          this.check.mobilePhone = this.dealerArr.mobilePhone
          this.check.fixedPhone = this.dealerArr.fixedPhone
          this.check.fax = this.dealerArr.fax
          this.check.emailAddress = this.dealerArr.emailAddress
          this.check.agencyProduct = this.dealerArr.agencyProduct
          this.check.bankAccount = this.dealerArr.bankAccount
          this.check.bankBalance = this.dealerArr.bankBalance
          this.check.companyIntro = this.dealerArr.companyIntro
          this.check.companyAddress = this.dealerArr.companyAddress
          this.check.remark = this.dealerArr.remark
        })
        .catch(function (error) {
          window.console.log(error)
        })
    },
    // //添加
    addUser: function () {
      var age = parseInt(this.add.userAge)
      var lId = parseInt(this.add.leaderId)
      var reg1 = /^1[3|4|5|7|8][0-9]\d{8}$/
      var reg2 = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
      if (this.add.userName.trim() !== '' && this.add.userPwd.trim() !== '' && this.add.userSex.trim() !== '' && age.toString().trim() !== '' && this.add.userPhone.trim() !== '' && this.add.userEmail.trim() !== '' && this.add.roleId.toString().trim() !== '' && lId.toString().trim() !== '' && reg1.test(this.add.userPhone) && reg2.test(this.add.userEmail)) {
        this.dialogVisibl = false
        this.userid = false
        window.console.log(this.add)
        window.console.log(age)
        window.console.log(lId)
        this.$axios.post('user/addUser', { userId: this.add.userId, userName: this.add.userName, userPwd: this.add.userPwd, userSex: this.add.userSex, userAge: age, userPhone: this.add.userPhone, userEmail: this.add.userEmail, roleId: this.add.roleId, leaderId: lId, remark: this.add.remark })
          .then((response) => {
            window.console.log(response)
            if (response.data.code === '200') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.requestData()
            } else if (response.data.code === '400') {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            } else if (response.data.code === '600') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            window.console.log(error)
          })
      } else {
        this.$message({
          message: '信息不能为空或信息有误',
          type: 'warning'
        })
      }
    },
    hanClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    // //删除
    async handleDelete (index, row) {
      window.console.log(row.userId)
      const messger = await this.$axios.post('user/delUser', { userId: row.userId })
      window.console.log(messger)
      if (messger.data.code === '200') {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.requestData()
      } else if (messger.data.code === '400') {
        this.$message({
          message: '删除失败',
          type: 'error'
        })
      } else if (messger.data.code === '600') {
        this.$message({
          message: '登录过期，请重新登录',
          type: 'warning'
        })
      }
      this.requestData()
    },
    handleimpower (index, row) {
      window.console.log(index, row)
    },
    // //页面条数改变
    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage = newsize
      this.$axios.post('user/queryUsers', { page: this.page, limit: 100, userId: 4, roleId: this.getUser.roleId, userName: '', roleName: '', leaderName: '' }).then((res) => {
        this.a = res.data.data
        this.zpage = Math.ceil(this.a.length)
        this.zhuan()
      })
    },
    // //当前页数改变
    handleCurrentChange (newpage) {
      window.console.log('newpage' + newpage)
      this.page = newpage
      window.console.log('this.page' + this.page)
      this.$axios.post('user/queryUsers', { page: this.page, limit: 100, userId: 4, roleId: this.getUser.roleId, userName: '', roleName: '', leaderName: '' }).then((res) => {
        // window.console.log(res);
        this.a = res.data.data
        this.zpage = Math.ceil(this.a.length)
        this.zhuan()
      })
    }
  }
}
</script>

<style scoped>
  .updateRole el-input{
    width: 100px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
